<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/Swiper/3.4.1/css/swiper.min.css">
    <style>
        *{
            padding:0;
            margin:0;
        }
        .swiper-container{
            height:500px;
        }
        .arrow-left {
            background: url(http://3.swiper.com.cn/demo/pigcms/images/arrows.png) no-repeat left top;
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top: -15px;
            width: 17px;
            height: 30px;
            z-index:10;
        }
        .arrow-right {
            background: url(http://3.swiper.com.cn/demo/pigcms/images/arrows.png) no-repeat left bottom;
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -15px;
            width: 17px;
            height: 30px;
            z-index:10;
        }
        .pagination {
            position: absolute;
            left: 0;
            text-align: center;
            bottom:5px;
            width: 100%;
        }
        .swiper-pagination-switch {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background: #999;
            margin: 0 3px;
            cursor: pointer;
        }
        .swiper-active-switch {
            background: #fff;
        }
        .swiper-slide{
            position:relative;
            opacity:0;
            transition: opacity 0.7s ease-in-out;
        }
        .swiper-slide-active{
            opacity:1;
        }
        .swiper-slide .img{
            position:absolute;
        }
        .inner{
            position:relative;
            display:block;
            width:1000px;
            height:500px;
            margin:0 auto;
        }
        .slide1{
            background-color: #03c36b;
        }
        .slide2{
            background-color: #1284d0;
        }
        .slide3{
            background-color: #43cfc8;
        }

        .slide1 .s0{left: 50%;margin-left: -154px; top: 100px}
        .slide1 .s1{left: 50%;margin-left: -425.5px;top: 200px;}
        .slide1 .s2{left: 50%;margin-left: -435px;top: 280px}
        .slide1 .s3{left: 0;bottom: 0px;z-index: 5;height:190px}
        .slide1 .s4{right: 0;bottom: 0px;z-index: 0;height: 160px}
        .slide2 .zh-a-1{left: 60px;top: 77px;z-index: 9;}
        .slide2 .zh-a-2{left: 0;top: 0;}
        .slide3 .b-1 {right: 72px;top: 180px;}
        .slide3 .b-2 {left: 90px;top: 180px;}
        .slide3 .b-3 {left: 50%;margin-left: -381px;top: 330px;}
        .slide3 .b-s-1 {width: 100px; left: 50px; bottom:0px;}
        .slide3 .b-s-2 {left: 160px;width: 160px;bottom:0px;}
        .slide3 .b-s-3{left: 390px;width: 58px;bottom:0px;}
        .slide3 .b-s-4{right: 359px; width: 103px;bottom:0px;}
        .slide3 .b-s-5{right: 250px;width: 150px;bottom:0px;}
        .slide3 .b-s-6{right: 0;width: 65px;bottom:0px;}
        .slide3 .b-y-1 {top:40px;left: 50%; margin-left: -20px;}
        .slide3 .b-y-2{top:40px;left:0}
        .slide3 .b-y-3{top:40px;right: 0}
        .loop{
            animation-iteration-count: infinite;/*无限*/
            animation-timing-function:linear;/*平滑*/
        }
        .targetBtn {
            margin-top: 20px;
            position: absolute;
            bottom: 60px;
            left: 352px;
            z-index: 999;
        }
        .targetBtn a{
            height:50px;
            border-radius:50px;
            background:rgba(0,0,0,.5);
            float:left;
            line-height:50px;
            text-align:center;
            color:#fff;
            text-decoration:none;
        }
        .targetBtn .a1{
            width:110px;
        }
        .targetBtn .a2{
            width:170px;
            margin-left:15px;
        }
        /*自定义CSS动画*/
        .moveRight{-webkit-animation-name:moveRight;animation-name:moveRight}
        @-webkit-keyframes moveRight{0%{opacity: 0;left:0px;}
            10%{opacity: 1;}
            100%{opacity: 1;left:550px;}}
        @keyframes moveRight{0%{opacity: 0;left:0px;}
            10%{opacity: 1;}
            100%{opacity: 1;left:550px;}}

        .moveLeft{-webkit-animation-name:moveLeft;animation-name:moveLeft}
        @-webkit-keyframes moveLeft{0%{opacity:0;left:390px;}
            10%{opacity:1;}
            100%{opacity:1;left:-370px;}}
        @keyframes moveLeft{0%{opacity:0;left:390px;}
            10%{opacity:1;}
            100%{opacity:1;left:-370px;}}
        .pre-load{text-align:center; position:absolute; width:100%;}
        .pre-btn{ z-index:10;}
        #pcSlide{width:100%;height:605px;float:left;position:relative;}
        #pcSlide .img{width:100%;height:605px;position:absolute;text-align:center;cursor:pointer;}
        #pcSlide .btn{margin-top:230px;}

        #pcpage{width:100%;height:600px;float:left;position:relative;}
        #pcpage .img{width:100%;height:600px;position:absolute;text-align:center;cursor:pointer;}
        #pcpage .btn{margin-top:230px;}

        #pcbanner{width:100%;height:550px;float:left;position:relative;}
        #pcbanner .img{width:100%;height:550px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner .btn{margin-top:200px;}
        #pcbanner .pre-load{
            background:url(/templets/default/images/pcbanner.jpg) no-repeat #f7f3f2 center 50%; height:550px;}


        #pcbanner2{width:100%;height:523px;float:left;position:relative;}
        #pcbanner2 .img{width:100%;height:523px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner2 .btn{margin-top:220px;}
        #pcbanner2 .pre-load{
            background:url(/templets/default/images/pcbanner2.jpg) no-repeat #fff center 50%; height:523px;}

        #pcbanner3{width:100%;height:460px;float:left;position:relative;}
        #pcbanner3 .img{width:100%;height:460px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner3 .btn{margin-top:190px;}
        #pcbanner3 .pre-load{
            background:url(/templets/default/images/pcbanner3.jpg) no-repeat #fff center 50%; height:460px;}


        #pcbanner4{width:100%;height:275px;float:left;position:relative;}
        #pcbanner4 .img{width:100%;height:275px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner4 .btn{margin-top:100px;}


        #pcbanner5{width:100%;height:657px;float:left;position:relative;}
        #pcbanner5 .img{width:100%;height:657px;position:absolute;text-align:center;cursor:pointer;}
        #pcbanner5 .btn{margin-top:295px;}



        #xinhua{width:100%;height:441px;float:left;position:relative;}
        #xinhua .img{width:100%;height:441px;position:absolute;text-align:center;cursor:pointer;}
        #xinhua .btn{margin-top:180px;}

        #bigcms{width:100%;height:500px;float:left;background:#03c36b;position:relative;}
        #bigcms .img{width:100%;height:500px;position:absolute;text-align:center;cursor:pointer;}
        #bigcms .btn{margin-top:222px;}

        #history{width:100%;height:144px;float:left;background:#fff;position:relative;}
        #history .img{width:100%;height:144px;position:absolute;text-align:center;cursor:pointer;}
        #history .btn{margin-top:45px;}

        #apple{width:100%;height:720px;float:left;background:#000;position:relative;}
        #apple .img{width:100%;height:720px;position:absolute;text-align:center;cursor:pointer;}
        #apple .btn{margin-top:330px;}


        #pcweb{
            width:1230px;
            margin:0 auto;}
        #pcweb	 a{
            padding:10px;
            background:#fff;
            border:1px solid #eee;}
    </style>
</head>
<div id="bigcms">
    <div class="img pre-btn">
        <img src="http://3.swiper.com.cn/templets/default/images/play.png" class="btn"></div>
    <div class="pre-load"><img src="http://3.swiper.com.cn/templets/default/images/pigcms.png"></div>
    <iframe height="500" data-src="http://3.swiper.com.cn/demo/pigcms/" width="100%">
        <div class="swiper-container">
            <a class="arrow-left" href="#"></a>
            <a class="arrow-right" href="#"></a>
            <div class="swiper-wrapper" style="width: 3894px; height: 500px; transform: translate3d(-2596px, 0px, 0px); transition-duration: 0.001s;">
                <div class="swiper-slide slide1" style="width: 1298px; height: 500px;">
                    <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1596&amp;extra=" class="inner" target="_blank">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/s0.png" class="ani img s0                    " swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: hidden;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/s1.png" class="ani img s1                    " swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: hidden;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/s2.png" class="ani img s2                    " swiper-animate-effect="flipInY" swiper-animate-duration="1s" swiper-animate-delay="0.8s" swiper-animate-style-cache="visibility: hidden;" style="visibility: hidden;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/s3.png" class="ani img s3                    " swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay=".2s" swiper-animate-style-cache="visibility: hidden;" style="visibility: hidden;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/s4.png" class="ani img s4                    " swiper-animate-effect="fadeInUp" swiper-animate-duration="2.5s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: hidden;">
                    </a>
                </div>
                <div class="swiper-slide slide2" style="width: 1298px; height: 500px;">
                    <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1596&amp;extra=" class="inner" target="_blank">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/pigBanner_03.png" class="ani img zh-a-1                                                                                     " swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache="visibility: hidden;" style="visibility: hidden;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/pigBnnaer_1_03.png" class="ani img zh-a-2                                                                                     " swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: hidden;" style="visibility: hidden;">
                    </a>
                </div>
                <div class="swiper-slide slide3 swiper-slide-visible swiper-slide-active" style="width: 1298px; height: 500px;">
                    <div class="inner">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-1.png" class="ani img b-1                                                                                                           bounceInLeft animated" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: visible;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-delay:0s;-webkit-animation-delay:0s;" style="visibility: visible; animation-duration: 1.5s; animation-delay: 0s;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-delay:0s;-webkit-animation-delay:0s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-2.png" class="ani img b-2                                                                                                           bounceInRight animated" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: visible;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-delay:0s;-webkit-animation-delay:0s;" style="visibility: visible; animation-duration: 1.5s; animation-delay: 0s;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-delay:0s;-webkit-animation-delay:0s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-3.png" class="ani img b-3                                                                                                           fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: visible;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-delay:0s;-webkit-animation-delay:0s;" style="visibility: visible; animation-duration: 1.5s; animation-delay: 0s;animation-duration:1.5s;-webkit-animation-duration:1.5s;animation-delay:0s;-webkit-animation-delay:0s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-s.png" class="ani img b-s-1                                                                                                           zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0s;-webkit-animation-delay:0s;" style="visibility: visible; animation-duration: 1.2s; animation-delay: 0s;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0s;-webkit-animation-delay:0s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-s.png" class="ani img b-s-2                                                                                                           zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0s;-webkit-animation-delay:0s;" style="visibility: visible; animation-duration: 1.2s; animation-delay: 0s;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0s;-webkit-animation-delay:0s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-s.png" class="ani img b-s-3                                                                                                           zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0.6s" swiper-animate-style-cache="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0.6s;-webkit-animation-delay:0.6s;" style="visibility: visible; animation-duration: 1.2s; animation-delay: 0.6s;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0.6s;-webkit-animation-delay:0.6s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-s.png" class="ani img b-s-4                                                                                                           zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0.8s" swiper-animate-style-cache="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;" style="visibility: visible; animation-duration: 1.2s; animation-delay: 0.8s;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-s.png" class="ani img b-s-5                                                                                                           zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="1.5s" swiper-animate-style-cache="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:1.5s;-webkit-animation-delay:1.5s;" style="visibility: visible; animation-duration: 1.2s; animation-delay: 1.5s;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:1.5s;-webkit-animation-delay:1.5s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-s.png" class="ani img b-s-6                                                                                                           zoomInDown animated" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay=".5s" swiper-animate-style-cache="visibility: visible;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:.5s;-webkit-animation-delay:.5s;" style="visibility: visible; animation-duration: 1.2s; animation-delay: 0.5s;animation-duration:1.2s;-webkit-animation-duration:1.2s;animation-delay:.5s;-webkit-animation-delay:.5s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-y-1.png" class="ani img b-y-1 loop                                                                                                           moveRight animated" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="4s" swiper-animate-style-cache="visibility: visible;animation-duration:15s;-webkit-animation-duration:15s;animation-delay:4s;-webkit-animation-delay:4s;" style="visibility: visible; animation-duration: 15s; animation-delay: 4s;animation-duration:15s;-webkit-animation-duration:15s;animation-delay:4s;-webkit-animation-delay:4s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-y-2.png" class="ani img b-y-2 loop                                                                                                           moveLeft animated" swiper-animate-effect="moveLeft" swiper-animate-duration="15s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: visible;animation-duration:15s;-webkit-animation-duration:15s;animation-delay:0s;-webkit-animation-delay:0s;" style="visibility: visible; animation-duration: 15s; animation-delay: 0s;animation-duration:15s;-webkit-animation-duration:15s;animation-delay:0s;-webkit-animation-delay:0s;">
                        <img src="http://3.swiper.com.cn/demo/pigcms/images/b-y-3.png" class="ani img b-y-3 loop                                                                                                           moveRight animated" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="0s" swiper-animate-style-cache="visibility: visible;animation-duration:15s;-webkit-animation-duration:15s;animation-delay:0s;-webkit-animation-delay:0s;" style="visibility: visible; animation-duration: 15s; animation-delay: 0s;animation-duration:15s;-webkit-animation-duration:15s;animation-delay:0s;-webkit-animation-delay:0s;">

                        <div class="targetBtn clearfix ani                                                                                                           zoomInUp animated" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s" swiper-animate-style-cache="visibility: visible;animation-duration:1s;-webkit-animation-duration:1s;animation-delay:0.5s;-webkit-animation-delay:0.5s;" style="visibility: visible; animation-duration: 1s; animation-delay: 0.5s;animation-duration:1s;-webkit-animation-duration:1s;animation-delay:0.5s;-webkit-animation-delay:0.5s;">
                            <a class="a1" href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1596&amp;extra=" target="_blank">了解更多</a>
                            <a class="a2" href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&amp;tid=1596&amp;extra=" style="" rel="media-gallery" target="_blank"><i></i>观看视频介绍</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="pagination"><span class="swiper-pagination-switch"></span><span class="swiper-pagination-switch"></span><span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span></div>
        </div>

    </iframe>
</div>


<script src="../jquery-1.9.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/Swiper/3.4.1/js/swiper.min.js"></script>
<!--<script src="idangerous.swiper2.7.6.min.js"></script>-->

<script>
    var mySwiper = new Swiper ('.swiper-container', {
        pagination: '.pagination',
        paginationClickable :true,
        autoplay : 1000,
        speed:1,

        //autoplayDisableOnInteraction : false,

        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(swiper); //隐藏动画元素
            swiperAnimate(swiper); //初始化完成开始动画
        },
        onSlideChangeEnd: function(swiper){
            swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
        }
    })
    $('.arrow-left').on('click', function(e){
        e.preventDefault()
        mySwiper.swipePrev()
    })
    $('.arrow-right').on('click', function(e){
        e.preventDefault()
        mySwiper.swipeNext()
    })
    function display(li){
        li.className='sub active';
        var subdis=li.getElementsByTagName("ul")[0];
        subdis.style.display="block";
    }
    function ndisplay(li){
        li.className='sub noactive';
        var subdis=li.getElementsByTagName("ul")[0];
        subdis.style.display="None";
    }
    var preBtn=document.querySelectorAll('.pre-btn');
    for (var j=0; j<preBtn.length; j++) {
        preBtn[j].onclick = function(){
            this.style.display='none';
            this.parentNode.querySelector('.pre-load').style.display='none';
            myframe=this.parentNode.querySelector('iframe');
            framesrc=myframe.attributes["data-src"].value;
            myframe.setAttribute("src",framesrc);
        }
    }
</script>
</body>
</html>